<template>
  <BasicTable @register="registerTable" />
</template>

<script setup lang="ts">
  import { BasicColumn, BasicTable, useTable } from '@/components/Table';
  import { computed } from 'vue';

  const props = defineProps({
    sourceData: {
      type: Object,
      required: true,
      default: () => {},
    },
  });

  const dataSource = computed(() => {
    return props.sourceData?.[''] || [];
  });
  const columns: BasicColumn[] = [
    { title: '明细', dataIndex: 'detailItemName' },
    { title: '销售价', dataIndex: 'salesAmount' },
    { title: '实收', dataIndex: 'payableAmount' },
    { title: '优惠', dataIndex: 'discountAmount' },
    { title: '含税', dataIndex: 'taxFee' },
  ];
  columns.forEach((column) => (column.slots = { customRender: column.dataIndex }));

  const [registerTable] = useTable({
    columns,
    dataSource,
    striped: false,
    bordered: false,
    canResize: false,
    scroll: { x: 888 },
    showIndexColumn: false,
  });
</script>

<style scoped lang="less"></style>
